<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            @submit.native.prevent
        >
            <el-form-item label="分类名称" prop="deptName">
                <el-input
                    v-model="queryParams.searchValue"
                    prefix-icon="el-icon-search"
                    placeholder="请输入分类名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="cyan"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    >新增</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="deptList"
            style="height: 76vh;overflow-y: auto;"
            row-key="id"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column
                prop="serviceName"
                label="分类"
                width="260"
            ></el-table-column>
            <el-table-column
                prop="serviceNumber"
                label="服务编码"
                width="260"
            ></el-table-column>
            <el-table-column
                prop="sort"
                label="排序"
                width="200"
            ></el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                :formatter="statusFormat"
                width="100"
            ></el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="200">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-plus"
                        @click="handleAdd(scope.row)"
                        >新增</el-button
                    >
                    <el-button
                        v-if="scope.row.parentId != 0"
                        v-show="scope.row.children.length == 0"
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或修改部门对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="600px"
            append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24" v-if="form.parentId !== 0">
                        <el-form-item label="上级服务" prop="parentId">
                            <treeselect
                                v-model="form.parentId"
                                :options="deptOptions"
                                :normalizer="normalizer"
                                placeholder="选择上级部门"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类名称" prop="serviceName">
                            <el-input
                                v-model="form.serviceName"
                                placeholder="请输入分类名称"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="sort">
                            <el-input-number
                                v-model="form.sort"
                                controls-position="right"
                                :min="0"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类编码" prop="serviceNumber">
                            <el-input
                                v-model="form.serviceNumber"
                                placeholder="请输入分类编码"
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类状态">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                    v-for="dict in statusOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                    >{{ dict.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    PostClazz,
    PutClazz,
    ClazzExport,
    ClazzList,
    DelectClazz,
    ClazzId,
    exclude,
    treeselect,
    PostCatalog,
    PutCatalog,
    CatalogExport,
    CatalogList,
    DelectCatalog,
    CatalogId,
    PriceList,
} from "@/api/basic/services";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "SerivceClass",
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 表格树数据
            deptList: [],
            // 部门树选项
            deptOptions: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 状态数据字典
            statusOptions: [],
            // 查询参数
            queryParams: {
                status: undefined,
                searchValue:undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                parentId: [
                    {
                        required: true,
                        message: "上级服务不能为空",
                        trigger: "blur",
                    },
                ],
                serviceName: [
                    {
                        required: true,
                        message: "服务名称不能为空",
                        trigger: "blur",
                    },
                ],
                serviceNumber: [
                    {
                        required: true,
                        message: "请输入服务编码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getList();
        this.getDicts("sys_normal_disable").then((response) => {
            this.statusOptions = response.data;
        });
    },
    methods: {
        /** 查询部门列表 */
        getList() {
            this.loading = true;
            ClazzList().then((response) => {
                this.deptList = this.handleTree(response.rows, "id");
                this.loading = false;
            });
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.serviceName,
                children: node.children,
            };
        },
        // 字典状态字典翻译
        statusFormat(row, column) {
            return this.selectDictLabel(this.statusOptions, row.status);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                parentId: undefined,
                status: "0",
                status: undefined,
                serviceName:undefined,
                sort:undefined,
                serviceNumber:undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            ClazzList(this.queryParams).then((response) => {
                this.deptList = this.handleTree(response.rows, "id");
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.searchValue = ''
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset();
            if (row != undefined) {
                this.form.parentId = row.id;
            }
            this.open = true;
            this.title = "添加分类";
            this.form.status = "0"
            this.form.sort = 1
            ClazzList().then((response) => {
                this.deptOptions = this.handleTree(response.rows, "id");
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            ClazzId(row.id).then((response) => {
                exclude(row.id).then((res) => {
                    this.deptOptions = this.handleTree(res.data, "id");
                });
                this.form = response.data;
                this.open = true;
                this.title = "修改服务";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != undefined) {
                        PutClazz(this.form).then((response) => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        PostClazz(this.form).then((response) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm(
                '是否确认删除名称为"' + row.serviceName + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return DelectClazz(row.id);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                });
        },
    },
};
</script>